<template>
  <div class="login-container">
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" class="login-form" auto-complete="on" label-position="left"  @keyup.enter.native="dataFormSubmit()" >
      <div class="title-container">
        <h3 class="login-title">视觉智能虚拟仿真平台管理端端登录</h3>
      </div>
      <!-- <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" status-icon> -->
        <el-form-item prop="account" >
          <span class="svg-container">
            <icon-svg icon-class="user" name="user" />
          </span>
          <el-input
            ref="account"
            v-model="dataForm.account"
            placeholder="Account"
            name="account"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
          <!-- <el-input v-model="dataForm.account" placeholder="帐号"></el-input> -->
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <icon-svg icon-class="password" name="password" />
          </span>
          <el-input
            ref="password"
            v-model="dataForm.password"
            placeholder="password"
            name="password"
            type="password"
            tabindex="1"
            auto-complete="on"
          />
          <!-- <el-input v-model="dataForm.password" type="password" placeholder="密码"></el-input> -->
        </el-form-item>
        <el-form-item prop="code">

          <el-row :gutter="10">
            <el-col :span="11">
              <span class="svg-container">
                <icon-svg icon-class="yanzhen" name="yanzhen" />
              </span>
              <el-input v-model="dataForm.code" placeholder="验证码">
              </el-input>
            </el-col>
            <el-col :span="10" class="login-captcha">
              <img :src="captchaPath" @click="getCaptcha()" alt="">
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button class="login-btn-submit" type="primary" @click="dataFormSubmit()">登录</el-button>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>
  /* eslint-disable */
  import { getUUID } from '@/utils'
  export default {
    data () {
      return {
        dataForm: {
          account: '',
          password: '',
          uuid: '',
          captcha: '',
          userType: 0
        },
        dataRule: {
          account: [
            { required: true, message: '帐号不能为空', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ],
          code: [
            { required: true, message: '验证码不能为空', trigger: 'blur' }
          ]
        },
        captchaPath: ''
      }
    },
    created () {
      this.getCaptcha()
    },
    methods: {
      // 提交表单
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl('/login/login'),
              method: 'post',
              data: this.$http.adornData({
                'account': this.dataForm.account,
                'password': this.dataForm.password,
                'uuid': this.dataForm.uuid,
                'code': this.dataForm.code
              })
            }).then(({data}) => {
              if (data.success) {
                this.$cookie.set('adminToken', data.data)
                this.$router.replace({ name: 'home' })
              } else {
                this.getCaptcha()
                this.$message.error(data.message)
              }
            })
          }
        })
      },
      // 获取验证码
      getCaptcha () {
        this.dataForm.uuid = getUUID()
        this.captchaPath = this.$http.adornUrl(`/login/captcha.jpg?uuid=${this.dataForm.uuid}`)
      }
    }
  }
</script>


<style lang="scss">
  /* 标题 */
  .login-title {
    color: #303133;
    text-align: center;
  }
  .login-captcha {
    overflow: hidden;
    > img {
      width: 100%;
      cursor: pointer;
      padding-top: 4px;
      height: 43px;
    }
  }
.login-form {
  width: 500px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: #fff; /* 透明背景色 */
  opacity: 0.8;
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url(~@/assets/img/login_bg.jpg);
}
.login-btn-submit {
      width: 100%;
      margin-top: 38px;
    }
.svg-container {
    padding: 6px 30px 6px 15px;
    color: #889aa4;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
  }
 .el-input {
     display: inline-block;
     height: 47px;
     width: 75%;
     }
</style>
